
<template>
  <base-modal
    v-if="visible"
    :title="$t('common.form.tip.jsCodeBlock.createAlias')"
    :show.sync="visible"
    :allow-auto-close="false"
    width="410px"
    class="alias-set-modal"
    @close="onClose" >
    <div class="alias-set-modal__content">
      <return-parse
        ref="returnParse"
        :result-alias-path="currentAlias"
        :analysis-results="analysisResults"
        :field="field"
        :show-result-object="false"
        @outResultAliasPath="outResultAliasPath">
      </return-parse>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">{{ $t('common.base.cancel') }} </el-button>
      <el-button type="primary" @click="onSubmit"> {{ $t('common.base.confirm') }}  </el-button>
    </div>
  </base-modal>
</template>
<script>
import { defineComponent, ref } from 'vue';
import returnParse from '@src/component/form/components/FormJsControl/components/returnParse.vue';
import { cloneDeep } from "lodash";

export default defineComponent({
  name: "ReturnParseModal",
  components: {
    returnParse
  },
  props: {
    resultAliasPath: {
      type: Array,
      default: () => [],
    },
    analysisResults: {
      type: String,
      default: () => '',
    },
    field: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { expose, emit }) {
    const visible  = ref(false);
    const currentAlias = ref({});

    const handleShowModal = ()=> {
      currentAlias.value = cloneDeep(props.resultAliasPath);
      visible.value = true;
    };

    const onClose = ()=> {
      visible.value = false;
    };

    const outResultAliasPath = (value)=> {
      currentAlias.value = value;
    };

    const onSubmit =()=> {
      onClose();
      emit('submitAliasValue', currentAlias.value);
    };



    expose({
      handleShowModal
    });


    return {
      visible,
      currentAlias,
      onClose,
      onSubmit,
      outResultAliasPath
    };
  },
});
</script>

<style scoped lang="scss">
.alias-set-modal__content{
  padding: 24px 22px;
}
</style>
